import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Card卡片组件
 * @element zss-card
 */
@customElement('zss-card')
export class ZssCard extends LitElement {
  static styles = css`
    :host {
      display: block;
      box-sizing: border-box;
    }

    .card {
      border: 1px solid var(--zss-border-color);
      border-radius: var(--zss-border-radius-base);
      background-color: var(--zss-bg-color);
      overflow: hidden;
      transition: box-shadow 0.3s;
    }

    :host([shadow="always"]) .card {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    :host([shadow="hover"]) .card:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    :host([shadow="never"]) .card {
      box-shadow: none;
    }

    .card-header {
      padding: 18px 20px;
      border-bottom: 1px solid var(--zss-border-color);
      box-sizing: border-box;
    }

    .card-header .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-header .title {
      font-size: var(--zss-font-size-large);
      font-weight: 500;
      color: var(--zss-text-color-primary);
      margin: 0;
    }

    .card-body {
      padding: 20px;
    }

    :host([body-style]) .card-body {
      padding: 0;
    }

    /* 简单卡片样式 */
    :host([type="simple"]) .card {
      border: none;
      background-color: transparent;
    }

    :host([type="simple"]) .card-header {
      border-bottom: none;
      padding: 0 0 12px 0;
    }

    :host([type="simple"]) .card-body {
      padding: 0;
    }

    /* 尺寸 */
    :host([size="small"]) .card-header {
      padding: 12px 16px;
    }

    :host([size="small"]) .card-body {
      padding: 16px;
    }

    :host([size="small"]) .card-header .title {
      font-size: var(--zss-font-size-base);
    }

    :host([size="large"]) .card-header {
      padding: 24px;
    }

    :host([size="large"]) .card-body {
      padding: 24px;
    }

    :host([size="large"]) .card-header .title {
      font-size: 18px;
    }
  `;

  /**
   * 卡片标题
   * @attr header
   */
  @property({ type: String })
  header = '';

  /**
   * 阴影显示时机
   * @attr shadow
   */
  @property({ type: String })
  shadow: 'always' | 'hover' | 'never' = 'always';

  /**
   * 卡片类型
   * @attr type
   */
  @property({ type: String })
  type: 'default' | 'simple' = 'default';

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 自定义body样式
   * @attr body-style
   */
  @property({ type: String })
  bodyStyle = '';

  render() {
    return html`
      <div class="card">
        ${this.header ? html`
          <div class="card-header">
            <div class="header">
              <span class="title">${this.header}</span>
              <slot name="header"></slot>
            </div>
          </div>
        ` : ''}
        <div class="card-body" style=${this.bodyStyle}>
          <slot></slot>
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-card': ZssCard;
  }
}